<template>
	<view>
		<view class="topVue">
			<view class="title absolute-auto">{{ title }}</view>
			<image 
				src="../static/nav.png" 
				style="width: 40rpx; height: 40rpx; left: 30rpx; line-height: 1;" 
				class="absolute-middle"
				@click="show = true"
			></image>
			<image
				src="../static/lang.png" 
				style="width: 40rpx; height: 40rpx; right: 30rpx; line-height: 1;" 
				class="absolute-middle"
				@click="isLang = true"
			></image>
			<image
				src="../static/record.png" 
				style="width: 40rpx; height: 40rpx; right: 100rpx; line-height: 1;" 
				class="absolute-middle"
				@click="navigate(path)"
				v-if="isRecord"
			></image>
		</view>
		<u-gap height="100"></u-gap>
		
		<u-popup v-model="show" mode="left">
			<view class="popupVue">
				<view class="header">
					<view class="cell flex-between align-center">
						<image src="../static/nav/logo_1.png" style="width: 152rpx; height: 56rpx;" @click="navigate('../index/index')"></image>
						<image src="../static/nav/nav.png" style="width: 40rpx; height: 40rpx;" @click="show = false"></image>
					</view>
					<view class="cell flex align-center">
						<image src="../static/nav/wallet.png" style="width: 68rpx; height: 68rpx;"></image>
						<view class="address">{{ $store.state.account | addressFilter() }}</view>
						<!-- <view class="address" v-else @click="connectWallet()">登录</view> -->
					</view>
				</view>
				<view class="navVue">
					<view class="item flex align-center" style="height: 120rpx;"  @click="navigate('../index/index')">
						<image src="../static/nav/logo_2.png" style="width: 135rpx; height: 42rpx;"></image>
					</view>
					<view class="item flex-between align-center padding-row30" @click="navigate('../index/index')">
						<view class="flex align-center">
							<image src="../static/nav/1.png" style="width: 36rpx; height: 36rpx;"></image>
							<text style="padding-left: 15rpx; font-size: 30rpx; line-height: 1;">{{i18n.n1}}</text>
						</view>
						<image src="../static/nav/more.png" style="width: 32rpx; height: 32rpx;"></image>
					</view>
					<view class="item flex-between align-center padding-row30" @click="navigate('../casting/casting')">
						<view class="flex align-center">
							<image src="../static/nav/2.png" style="width: 36rpx; height: 36rpx;"></image>
							<text style="padding-left: 15rpx; font-size: 30rpx; line-height: 1;">{{i18n.n2}}</text>
						</view>
						<image src="../static/nav/more.png" style="width: 32rpx; height: 32rpx;"></image>
					</view>
					<view class="item flex-between align-center padding-row30" @click="navigate('../financeManagement/financeManagement')">
						<view class="flex align-center">
							<image src="../static/nav/3.png" style="width: 36rpx; height: 36rpx;"></image>
							<text style="padding-left: 15rpx; font-size: 30rpx; line-height: 1;">{{i18n.n3}}</text>
						</view>
						<image src="../static/nav/more.png" style="width: 32rpx; height: 32rpx;"></image>
					</view>
					<view class="item flex-between align-center padding-row30" @click="navigate('../team/team')">
						<view class="flex align-center">
							<image src="../static/nav/4.png" style="width: 36rpx; height: 36rpx;"></image>
							<text style="padding-left: 15rpx; font-size: 30rpx; line-height: 1;">{{i18n.n4}}</text>
						</view>
						<image src="../static/nav/more.png" style="width: 32rpx; height: 32rpx;"></image>
					</view>
					<view class="item flex-between align-center padding-row30" @click="navigate('../node/node')">
						<view class="flex align-center">
							<image src="../static/nav/5.png" style="width: 36rpx; height: 36rpx;"></image>
							<text style="padding-left: 15rpx; font-size: 30rpx; line-height: 1;">{{i18n.n5}}</text>
						</view>
						<image src="../static/nav/more.png" style="width: 32rpx; height: 32rpx;"></image>
					</view>
					<view class="item flex-between align-center padding-row30" @click="navigate('../wallet/wallet')">
						<view class="flex align-center">
							<image src="../static/nav/6.png" style="width: 36rpx; height: 36rpx;"></image>
							<text style="padding-left: 15rpx; font-size: 30rpx; line-height: 1;">{{i18n.n6}}</text>
						</view>
						<image src="../static/nav/more.png" style="width: 32rpx; height: 32rpx;"></image>
					</view>
					<view class="item flex-between align-center padding-row30" @click="navigate('../lp/lp')">
						<view class="flex align-center">
							<image src="../static/nav/7.png" style="width: 36rpx; height: 36rpx;"></image>
							<text style="padding-left: 15rpx; font-size: 30rpx; line-height: 1;">LP</text>
						</view>
						<image src="../static/nav/more.png" style="width: 32rpx; height: 32rpx;"></image>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-action-sheet :list="langs" v-model="isLang" @click="langChange" ></u-action-sheet>
	
		<!-- 语言切换 -->
		<!-- <u-popup v-model="isLang" mode="center">
			<view class="langVue flex-between flex-column">
				<view class="lang flex-between flex-column align-center">
					<view class="title text-center">{{i18n.lang}}</view>
					<view class="btnVue">
						<view class="btn" @click="langChange('Cn')">中文简体</view>
						<view class="btn margin40" @click="langChange('En')">English</view>
					</view>
				</view>
				<view class="closeVue flex-center align-center" @click="isLang=false">
					<image src="../static/close.png" style="width: 58rpx; height: 58rpx;"></image>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import url from "../common/url.js"
	export default {
		props: ["title", "isRecord", "path"],
		data(){
			return {
				show: false,
				isLang: false,
				langs: [
					{text: "简体中文", id: "Cn", color: "#333"}, 
					{text: "English", id: "En", color: "#333"},
					{text: "العرب", id: "Ar", color: "#333"},
					{text: "한국어", id: "Kr", color: "#333"},
					{text: "日本語", id: "Jp", color: "#333"},
					{text: "Das ist Deutsch.", id: "De", color: "#333"},
					{text: "En français", id: "Fr", color: "#333"},
					{text: "ภาษาไทย", id: "Dt", color: "#333"},
					{text: "español", id: "Es", color: "#333"},
					{text: "Việt nam", id: "Vn", color: "#333"},
					{text: "nederlands", id: "Nl", color: "#333"},
					{text: "Língua portuguesa português", id: "Pt", color: "#333"},
					{text: "русск", id: "Ru", color: "#333"},
				]
			}
		},
		computed:{
			i18n() {
				return this.$t("message");
			}
		},
		methods: {
			langChange(lang){
				console.log(lang)
				if(this.$i18n.locale==lang) return this.isLang = false
				this.$i18n.locale = this.langs[lang].id
				uni.setStorageSync('language', this.langs[lang].id)
				this.isLang = false
			},
			
			navigate(url){
				if(!this.$store.state.isLogin) return this.$u.toast("请先登录")
				this.show = false
				uni.navigateTo({
					url: url
				})
			},
			
			
			
		}
	}
</script>

<style lang="less">
	/deep/.u-mode-center-box {
		background-color: transparent !important;
	}
	/deep/.u-drawer-left {
		background-color: transparent !important;
	}
	.topVue {
		width: 100%;
		height: 100rpx;
		background: #0D0F13;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		.title {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 1;
			color: #fff;
		}
	}
	
	.langVue {
		width: 670rpx;
		height: 682rpx;
		padding: 52rpx 0 80rpx;
		box-sizing: border-box;
		.lang {
			width: 670rpx;
			height: 402rpx;
			background: url("../static/lang_kuang.png") no-repeat;
			background-size: 100% 100%;
			padding: 60rpx 0 90rpx;
		}
		.title {
			font-size: 32rpx;
			font-weight: 600;
		}
		.btn {
			width: 570rpx; 
			height: 70rpx;
			background: transparent;
			text-align: center;
		}
		.closeVue {
			width: 100%;
			height: 100rpx;
		}
	}
	
	.popupVue {
		width: 450rpx;
		height: 100vh;
		background: url("../static/nav/mask.png") no-repeat;
		background-size: 100% 100%;
		.header {
			width: 450rpx;
			height: 240rpx;
			background: #20262D;
			.cell {
				width: 100%;
				height: 120rpx;
				padding: 0 30rpx;
				.address {
					width: 240rpx;
					height: 50rpx;
					background: #45F882;
					border-radius: 8rpx;
					line-height: 50rpx;
					text-align: center;
					font-weight: 500;
					font-size: 30rpx;
					color: #111A21;
					margin-left: 15rpx;
				}
			}
		}
		.navVue {
			width:450rpx;
			padding-left: 30rpx;
			.item {
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid rgba(255,255,255,0.3);
			}
		}
	}
</style>